<template>
  <svg class="svg-icon" :style="style" :width="width" :height="height" xria-hidden="true">
    <use :xlink:href="iconName" ></use>
  </svg>
</template>

<script lang="ts" setup name="svgIcon">
  import { computed } from 'vue'
  let props = defineProps({
    style: {
      type: String,
      default: '',
    },
    width: {
      type: String,
      default: '16px'
    },
    height: {
      type: String,
      default: '16px'
    },
    name: {
      type: String,
      require:true
    },
    color: {
      type: String,
      default: '#333',
    },
    prefix: {
      type: String,
      default: 'icon',
    },
  })

  // 图标的名称
  const iconName = computed(() => {
    return `#${props.prefix}-${props.name}`
  })
</script>

<style lang="scss" scoped>
  .svg-icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    outline: none;
    color: v-bind(color);
    fill: v-bind(color);
    // font-size: 18px;
    font-style: normal;
    vertical-align: -2px;
    stroke-width: 5;
  }
</style>
